{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
    


    <el-table
        :default-expand-all="false"
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          :width="80"
          align="center">
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="tel">
        </el-table-column>
        <el-table-column
          label="昵称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="真实姓名"
          align="center">
            <template slot-scope="r">
                <template v-if="r.row.realname">{{r.row.realname}}</template>
                <el-tag type="info" size="mini" v-else>未填写</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="支付宝"
          align="center">
            <template slot-scope="r">
                <template v-if="r.row.alipay">{{r.row.alipay}}</template>
                <el-tag type="info" size="mini" v-else>未填写</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="邀请人"
          align="center">
            <template slot-scope="r">
                <template v-if="r.row.parent">{{r.row.parent}}</template>
                <el-tag type="info" size="mini" v-else>无</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="VIP"
          prop="vip_text"
          sortable
          align="center">
            <template slot-scope="r">
                <el-tag type="danger" size="mini" v-if="r.row.vip_text">{{r.row.vip_text}}</el-tag>
                <el-tag type="info" size="mini" v-else>非VIP</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="奖励比"
          prop="vip_ratio"
          sortable
          align="center"
          :formatter="vipRatioFormat">
        </el-table-column>
        <el-table-column
          label="VIP到期时间"
          align="center"
          prop="vip_expire"
          sortable
          width="140px">
            <template slot-scope="r">
                <template v-if="r.row.vip_expire>0">{{dateFormat(r.row.vip_expire*1000,'Y-m-d H:i')}}</template>
                <el-tag type="info" size="mini" v-else>非VIP</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="注册时间"
          align="center"
          width="140px"
          prop="s_time"
          sortable
          :formatter="dateFormats">
        </el-table-column>
        <el-table-column
          label="代理商"
          align="center"
          prop="is_agent"
          sortable>
            <template slot-scope="r">
                <el-tag type="success" size="mini" v-if="r.row.is_agent">是</el-tag>
                <el-tag type="info" size="mini" v-else>否</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          prop="status"
          sortable>
            <template slot-scope="status">
                <el-tag type="success" size="mini" v-if="status.row.status">启用</el-tag>
                <el-tag type="info" size="mini" v-else>禁用</el-tag>
            </template>
        </el-table-column>
        
        <el-table-column label="操作" width="300">
            <!-- <template slot-scope="c">
                <el-button v-if="c.row.id!=super_id&&c.row.status" class="ws-mini" type="info" size="mini" @click="close(c.row)">禁用</el-button>
                <el-button v-else-if="c.row.id!=super_id" class="ws-mini" type="primary" size="mini" @click="close(c.row)">启用</el-button>

                <el-button v-if="c.row.id!=super_id&&c.row.is_agent" class="ws-mini" type="info" size="mini" @click="isAgent(c.row)">取消代理</el-button>
                <el-button v-else-if="c.row.id!=super_id" class="ws-mini" type="primary" size="mini" @click="isAgent(c.row)">设为代理</el-button>

                <el-button type="success" size="mini" @click="edit(c.row)" class="ws-mini">编辑</el-button>
                <el-button type="success" size="mini" @click="editVip(c.row)" class="ws-mini">更改VIP</el-button>
            </template> -->
            <template slot-scope="c">
                <el-button class="ws-mini" type="success" size="mini" @click="checku(c.row)">查看下级用户</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page">{$list->render()|raw}</div>
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->append(['vip_text','parent'])->toJson()|raw}, // 列表数据
        vip:{$vip|raw},
        addVisible:false, //添加菜单框
        setVip:false,
        dialogTitle:'修改用户信息',
        data:{}, // 添加、编辑数据
        vipData:{},
        super_id:{:config('auth.super_id')},
        rules:{
            tel:[
                {required: true, message:'请输入手机号码'},
            ],
            name:[
                {required: true, message:'请输入昵称'},
            ],
            
        },
    },
    created(){
        this.emptyData();
    },
    methods:{
        rowStyle(){
            return {'background-color':'#eee'}
        },
        emptyData(newData={}){
            this.data=Object.assign({
                name:'',
                alipay:'',
                realname:'',
                remark:'',
                status:1,
                is_agent:0,
            },newData);
        },

        checku(row){
            // console.log(row.id);
            window.location.href='{:url('daili/Index/lowList')}?pid='+row.id;
        },
        vipRatioFormat(row, column, val, index){
            if(val>0){
                return val+'%';
            }else{
                return '-';
            }
        },

    },
});
</script>
{/block}